<template>
<div>
    <!-- 登录按钮 -->
    <div class="centerTop">
        <div class="peaseLoginBox">
            <div class="peaseLogin" @click="getCode">请登录</div>
            <div class="peaseLoginspan">开启你的氧气好心情</div>
        </div>
    </div>
    <!-- 设置区域 -->
    <div class="centerBottom">
        <div class="collectBox">
            <!-- 收听历史 -->
            <div class="ListenToHistory">
                <!-- 头部 -->
                <div class="commentBox">
                    <div class="settingBoxLeft">收听历史</div>
                </div>
                <!-- 内容区 -->
                <div class="pictureBox">
                    <div class="pictureBoxWrap">
                        <router-link to="/" tag="div" class="pictureBoxWrapBtn">去逛逛</router-link>
                        <div class="pictureBoxWrapBtnspan">暂无收听历史哦，去首页逛逛吧~</div>
                    </div>
                </div>
            </div>
            <!-- 我的收藏 -->
            <div class="MyCollection">
                <!-- 头部 -->
                <div class="commentBox">
                    <div class="settingBoxLeft">我的收藏</div>
                </div>
                <!-- 内容区 -->
                <div class="pictureBox">
                    <div class="pictureBoxWrap">
                        <router-link to="/" tag="div" class="pictureBoxWrapBtn">去收藏</router-link>
                        <div class="pictureBoxWrapBtnspan">暂无收藏音频哦，快去收藏一下吧~~</div>
                    </div>
                </div>
            </div>

            <!-- 关注的人 -->
            <div class="PeopleOfConcern">
                <div class="settingBoxLeft">关注的人</div>
                <router-link to="/" tag="div" class="settingBoxRight PeopleOfConcernBox">
                    <div class="rowBox"></div>
                </router-link>
            </div>
        </div>
        <!-- 设置区域 -->
        <div class="settingBox">
            <div class="MyComments commentBox">
                <div class="settingBoxLeft">我的评论</div>
                <router-link to="/" tag="div" class="settingBoxRight">
                    <span>查看</span>
                    <span class="rowBox"></span>
                </router-link>
            </div>
            <div class="MyComments commentBox">
                <div class="settingBoxLeft">我的下载</div>
                <router-link to="/" tag="div" class="settingBoxRight">
                    <span>查看</span>
                    <span class="rowBox"></span>
                </router-link>
            </div>
            <div class="MyComments commentBox">
                <div class="settingBoxLeft">设置</div>
                <router-link to="/" tag="div" class="settingBoxRight">
                    <span class="rowBox"></span>
                </router-link>
            </div>
        </div>
    </div>
    <div class="copy"><a href="https://beian.miit.gov.cn/" target="_blank">粤ICP备16114903号</a></div>
</div>
</template>

<script>
export default {
    name: "NotLoggedIn",
    components: {},
    data() {
        return {};
    },
    //监听属性 类似于data概念
    computed: {},
    //监控data中的数据变化
    watch: {},
    //方法集合
    methods: {
        // 获取code
        getCode() {
            // 非静默授权，第一次有弹框
            // const code = this.$GetUrlParam("code"); // 截取路径中的code，如果没有就去微信授权，如果已经获取到了就直接传code给后台获取openId
            // const local = window.location.href;
            // if (code == null || code === "") {
            //     window.location.href =
            //         "https://open.weixin.qq.com/connect/oauth2/authorize?appid=" +
            //         "wxba620a01716aad8f" +
            //         "&redirect_uri=" +
            //         encodeURIComponent(local) +
            //         "&response_type=code&scope=snsapi_userinfo&state=1#wechat_redirect";
            // } else {
            //     this.getOpenId(code); //把code传给后台获取用户信息
            // }
            // localStorage.setItem("token","35463953daab452e8bd1346b86eb717e")
            this.$router.push("/login")
        },
    },
    created() {},
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {},
    //如果页面有keep-alive缓存功能，这个函数会触发
    activated() {},
};
</script>

<style lang="css" scoped>
/*箭头*/
.rowBox {
    width: 15px;
    height: 15px;
    transform: rotate(45deg);
    display: inline-block;
    border-top: 1px solid #a8acbb;
    border-right: 1px solid #a8acbb;
    margin-left: 11px;
}

/* 头部 */
.centerTop {
    padding: 0 32px;
    width: 100%;
    box-sizing: border-box;
}

.peaseLoginBox {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 50px 0;
}

.centerTop .peaseLogin {
    width: 180px;
    height: 80px;
    font-size: 40px;
    font-weight: Bold;
    border: 2px solid #A8ACBB;
    color: #323232;
    border-radius: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 20px 0;
}

.peaseLoginspan {
    font-size: 24px;
    color: #a8acbb;
}

/* 选项区域 */
.centerBottom {
    padding: 0 25px;
    box-sizing: border-box;
    background-color: #fff;
}

/*我的收藏等--区域*/
.centerBottom .collectBox {
    width: 100%;
    border-bottom: 1px solid #f2f2f2;
}

.ListenToHistory,
.MyCollection,
.PeopleOfConcern {
    margin: 50px 0;
}

/*收听历史*/
.collectBox .pictureBox {
    display: flex;
    align-items: center;
    margin: 28px 0;
}

.pictureBoxWrap {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.pictureBoxWrap .pictureBoxWrapBtn {
    color: #e66d4d;
    font-size: 30px;
    border-radius: 34px;
    border: 2px solid #e66d4d;
    width: 240px;
    line-height: 68px;
    text-align: center;
    margin-bottom: 24px;
}

.pictureBoxWrap .pictureBoxWrapBtnText {
    color: #a8acbb;
    font-size: 24px;
}

/*关注的人*/
.PeopleOfConcern {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.collectBox .PeopleOfConcernBox {
    display: flex;
    align-items: center;
}

/*我的设置等--区域*/
.centerBottom .settingBox {
    width: 100%;
    padding-top: 20px;
    margin-bottom: 20px;
    box-sizing: border-box;
}

/*我的评论*/
.centerBottom .settingBox .MyComments {
    width: 100%;
    height: 80px;
}

.commentBox {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.settingBoxLeft {
    font-size: 32px;
    color: #323232;
    font-weight: bold;
}

.settingBoxRight {
    color: #a8acbb;
    font-size: 24px;
}
</style>
